<script setup lang="ts">
import { API_ROOT, BOOK_TYPE_OPTIONS, NATIONALITY_OPTIONS } from '@/types/constant';
import type { avatarResponseData, Book } from '@/types';
import { ElMessage } from 'element-plus';
import { computed, ref, watch } from 'vue';
import Row from './Row.vue';
export type BookDialogType = 'Create' | 'Edit';

const props = defineProps<{ type?: BookDialogType }>();
const bookForm = defineModel<Book>({ required: true });
const dialogFormVisible = defineModel<boolean>('visible');
const emit = defineEmits(['ok']);

const purchaseQuantity = ref(1);
watch(bookForm.value, () => {
  purchaseQuantity.value = 1;
});

const rules = ref({
  code: [{ required: true, message: '项目编码为必填项', trigger: 'blur' }],
  name: [{ required: true, message: '项目名称为必填项', trigger: 'blur' }],
});

const handleAvatarSuccess = (res: avatarResponseData) => {
  if (res.flag && res.data) {
    bookForm.value.book_image = res.data;
    ElMessage({ type: 'success', message: res.msg });
  } else {
    ElMessage({ type: 'error', message: res.msg || '上传失败' });
  }
};

const imgUrl = computed(() => {
  if (bookForm.value.book_image) {
    return `${API_ROOT}/upload/${bookForm.value.book_image}`;
  }
  return '';
});

const beforeAvatarUpload = (file: any) => {
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    ElMessage({ type: 'error', message: '上传图片大小不能超过 2MB!' });
  }
  return isLt2M;
};

const title = computed(() => (props.type === 'Create' ? '新增图书' : '编辑图书'));
</script>

<template>
  <el-dialog :title="title" v-model="dialogFormVisible" width="50%">
    <el-form ref="dataAddForm" :model="bookForm" :rules="rules" label-position="right" label-width="100px">
      <el-form-item label="书籍编码" prop="book_code">
        <el-input v-model="bookForm.book_code" />
      </el-form-item>
      <el-form-item label="书名" prop="name">
        <el-input v-model="bookForm.name" />
      </el-form-item>
      <el-form-item label="ISBN号" prop="isbn">
        <el-input v-model="bookForm.isbn" />
      </el-form-item>
      <el-form-item label="库存数量" prop="number">
        <el-input v-model.number="bookForm.number" type="number" />
      </el-form-item>
      <el-form-item label="作者国籍" prop="author_nationality">
        <el-select v-model="bookForm.author_nationality">
          <el-option v-for="item in NATIONALITY_OPTIONS" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="上传图片">
        <el-upload
          class="avatar-uploader"
          name="imgFile"
          action="http://localhost:8080/books/upload"
          :auto-upload="true"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imgUrl" :src="imgUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="适用范围" prop="applicable_scope">
        <el-input v-model="bookForm.applicable_scope" />
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-select v-model="bookForm.type">
          <el-option v-for="item in BOOK_TYPE_OPTIONS" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="价格" prop="price">
        <el-input v-model.number="bookForm.price" type="number" />
      </el-form-item>
      <el-form-item label="图书简介" prop="description">
        <el-input v-model="bookForm.description" type="textarea" />
      </el-form-item>
      <el-form-item label="注意事项" prop="notes">
        <el-input v-model="bookForm.notes" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="emit('ok')">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style>
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
</style>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
